<script setup>
import {ref} from "vue";

let message = ref("Hello, World!")
let isActive = ref(true)
let isLine = ref(true)
</script>

<template>
  <!-- 对象语法：使用类似 JavaScript 对象给动态绑定属性赋值 -->
  <!-- 样式类作为 key, 使用布尔类型的变量或者布尔值作为 value -->
  <h2 :class="{active:true}">{{ message }}</h2>

  <h2 :class="{line:true}">{{ message }}</h2>

  <h2 :class="{active:isActive, line: isLine}">{{ message }}</h2>

</template>

<style scoped>
.active {
  color: red;
}

.line {
  text-decoration: underline
}
</style>